<template>
  <div class="ContentList">


     <ul v-for="(val,i) in list" style="display: flex">
       <li :class="{active : i==index}"  @click="clickMe($event,i) " style="flex: 1"> {{val.title}}</li>
     </ul>
     <ul class="cc">
       <li class="active" >About Us</li>
       <li >product</li>
       <li >team</li>
       <li >career</li>
       <li >news</li>
       <li >contact</li>
     </ul>
    <div class="bruce flex-ct-x">
      <ul class="initial-keyframe">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>



  </div>
</template>
<script>
  //qrCode
  export default {
    data() {
      return {
        color:{
          height:'',
          background:''
        },
        threeValue:{
          one:'',
          two:'',
          three:''
        },
        arr:[3],
        indexes:0,
        index:0,

        list:[
          {
          title:'学历',
          index:'0'},
          {
            title:'学历1',
            index:'2'
          }]
      }
    },
    created() {
     // console.log(this.$data,"+++")
    },
    mounted(){
     let li = document.querySelectorAll("ul.cc li")
      // console.log(li,typeof li)
      for (var i = 0; i < li.length; i++)
        li[i].onclick = function () {

          for (var i = 0; i < li.length; i++) li[i].className = '';
          this.className='active'
        }
    },
    methods: {
      add(){
        this.color.background="#555";
      },
      tap(event,i,j){
        this.indexes = j
      },
      clickMe(event,i){
        this.index=i;
      },
    }


  }
</script>
<style lang="scss" scoped>
  ul{
    display: flex;
    li{
      flex:1;
      width: 200px;
      text-align: center;
      line-height:60px ;
    }
    .active{
      color:#4ae2ef;
      border-bottom: 1px solid #4ae2ef;
    }
  }
  .little_box {
    overflow: hidden;
    display: flex;
    flex-direction: row;
  }
  .little_box span{
    padding:4px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 15px;
    background: #e5e5e5;
  }
  .little_box span.on{
    background: #6181ff;
    color: #ffffff;
  }
  .container-select{
    width:60px;
    height:500px;
    border: 1px solid #606266;
  }
  .initial-keyframe {
    position: relative;
    width: 100px;
    height: 100px;

    li {
      position: absolute;
      margin-left:100px;
      border-radius: 100%;
      width: 100%;
      height: 100%;
      background-color: green;
      transform: rotate(0) translate(-80px, 0);
      animation: rotate 3s linear infinite;
      &:nth-child(2) {
        animation-delay: -1s;
      }
      &:nth-child(3) {
        animation-delay: -2s;
      }
    }
  }
  @keyframes rotate {
    to {
      transform: rotate(1turn) translate(-80px, 0);
    }
  }

</style>

